<template>
	<view class="home">

		<uni-popup ref="duihuan">
			<view class="popup_box">
				<rich-text :nodes="res.tankuang"></rich-text>
			</view>
		</uni-popup>

		<!-- 更新 -->

		<view class="hot_update_zhe" v-if="updateType">
			<view class="hot_update_box">
				<image src="@/static/home/hot_updatebj.png" mode="widthFix"></image>
				<view class="hot_update_box_item">
					<view class="hot_update_box_item_">
						<!-- <view class="dingwei_box_text" v-for="(item,index) in appUptext" :key="index">
							{{item}}
						</view> -->
						<p>系统更新</p>

						<p>修复已知BUG</p>
					</view>
					<progress v-if="!isxiazai" style="margin-bottom: 20rpx;" :percent="dlbtn" activeColor='#FA625D'
						stroke-width="3" />

					<view class="gengxinan" v-if="isxiazai" @click="download()">
						立即更新
					</view>
				</view>
			</view>
		</view>
		<!-- / -->
		<view class="title"></view>
		<view class="home_box">
			<view class="home_box_lbt">
				<uni-swiper-dot class="uni-swiper-dot-box" color='red' @clickItem=clickItem :current="current"
					:dotsStyles="dotsStyles" mode="round" :info="res.banner_list" eld="content">
					<swiper circular class="swiper-box" style="height:400rpx;" @change="change"
						:current="swiperDotIndex">
						<swiper-item class="swiper_item" v-for="(item, index) in res.banner_list" :key="index"
							style="background-color: #261d5a;color: #fff;">
							<!-- {{item}} -->
							<image :src="item.thumb" mode="heightFix"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="home_box_center">
				<view class="home_box_center_item" v-for="(item,index) in homeArr" :key="index"
					@click="gotoFun(item.pages)">
					<image :src="item.src" mode=""></image>
					<p>{{item.text}}</p>
				</view>
			</view>
			<view class="home_box_item">
				<view class="home_box_item_title" @click="gotoFun('/pages/home/chanpinList/chanpinList?type=0')">
					<view class="home_box_item_title_left">
						品牌馆
					</view>
					<view class="home_box_item_title_right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="home_box_item_content">
					<view class="home_box_item_content_item" v-for="(item,index) in res.pinpai" :key="index"
						@click="gotoFun(`/pages/home/shangpinxiangqing/shangpinxiangqing?goodsid=${item.id}&type=cxsy`)">
						<image class="image" :src="item.thumb" mode=""></image>
						<!-- <p>库存：{{item.total}}</p>
						<p>已售：{{item.yishou}}</p> -->
						<p>{{item.title}}</p>
						<span>￥{{item.marketprice}}</span>
					</view>
				</view>
			</view>
			<view class="home_box_item">
				<view class="home_box_item_title" @click="gotoFun('/pages/home/chanpinList/chanpinList?type=1')">
					<view class="home_box_item_title_left">
						购选区
					</view>
					<view class="home_box_item_title_right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="home_box_item_content">
					<view class="home_box_item_content_item" v-for="(item,index) in res.xuangou" :key="index"
						@click="gotoFun(`/pages/home/shangpinxiangqing/shangpinxiangqing?goodsid=${item.id}&type=cxsy`)">
						<image class="image" :src="item.thumb" mode=""></image>
						<!-- <p>库存：{{item.total}}</p>
						<p>已售：{{item.yishou}}</p> -->
						<p>{{item.title}}</p>
						<span>￥{{item.marketprice}}</span>
					</view>
				</view>
			</view>
			<view class="app_bottom">

			</view>
		</view>
		<app-tab :tabIndex='0'></app-tab>
	</view>
</template>

<script>
	import appTab from "@/components/appTab.vue";
	import {
		api_index_index_info,
		acommsion_getappversion
	} from "@/api/home.js"
	export default {
		components: {
			appTab
		},
		data() {
			return {
				openid: '',
				res: '',
				//更新
				style_css: '',
				dlbtn: 0,
				appUptext: '',
				updateType: false,
				// newtext: '',
				pointerevents: '',


				isxiazai: true,


				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				homeArr: [{
					src: '../../static/home/saomazhuce.png',
					text: '扫码注册',
					pages: '/pages/home/yaoqing/yaoqing'
				}, {
					src: '../../static/home/nongyieguan.png',
					text: '农业馆'
				}, {
					src: '../../static/home/duihuaqu.png',
					text: '兑换区',
					pages: '/pages/home/chanpinList/chanpinList?type=2'
				}],
				current: 0,
				swiperDotIndex: 0,
				dotsStyles: {
					backgroundColor: '#fff',
					border: '1px #dad6ff solid',
					selectedBackgroundColor: '#fff',
					selectedBorder: '1px #4a3ace solid'
				},

			};
		},
		onShow() {
			uni.hideTabBar();
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');

			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.get_hot_url();
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_index_infoFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			async api_index_index_infoFun() {
				let data = await api_index_index_info(this.openid);
				if (data.error === 0) {
					this.res = data;
					if (this.res.dikouqu == undefined || this.res.dikouqu == null) {
						this.res.dikouqu = []
					}
					if (data.tankuang != '' && data.tankuang != undefined) {
						this.$refs.duihuan.open('center')
					}
				}

			},
			gotoFun(url) {
				uni.navigateTo({
					url
				})
			},
			// async api_index_index_infoFun() {
			// 	let data = await api_index_index_info(this.openid);
			// 	if (data.error === 0) {
			// 		this.res = data;
			// 	}

			// },
			change(e) {
				this.current = e.detail.current
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},



			//获取版本
			async get_hot_url() {
				var now_v = '';
				var hot_v = '';
				let _this = this;
				// 发起请求获取 hot_v
				let data = await acommsion_getappversion();
				hot_v = data.version;
				uni.getSystemInfo({
					success(e) {
						let a = e.appWgtVersion.split('.');
						a.forEach(item => {
							now_v = now_v += item;
						});
						if (hot_v !== now_v) {
							setTimeout(() => {
								_this.updateType = true;
							}, 500);
							_this.hot_url = data.url;
							console.log(data);
						}
					}
				});
			},


			// 下载
			download() {
				if (this.isxiazai) {
					this.isxiazai = false;
					this.dlbtn = 0;
					let _this = this;
					if (this.hot_url !== '') {
						var downToak = plus.downloader.createDownload(this.hot_url, { //拿到下载任务的对象
							filename: '_doc/update/'
						}, function(d, status) {
							console.log(d, status);
							plus.nativeUI.closeWaiting();
							if (status == 200) { //在回调中根据状态 进行操作
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {},
									function(
										error) {
										uni.showToast({
											title: '安装失败',
											mask: false,
											duration: 1500
										});
									})
							} else {
								app.alert("配置出错,请检查网络链接！");
							}
						});
						downToak.start(); // 开启下载的任务
						var prg = 0;
						downToak.addEventListener("statechanged", function(task, status) { //给下载任务设置一个监听 并根据状态  做操作
							switch (task.state) {
								case 1:
									break;
								case 2:
									break;
								case 3:
									prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) *
										100);
									_this.dlbtn = prg
									break;
								case 4:
									_this.isxiazai = true;
									break;
							}
						});
					}
				} else {
					return
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f3f5f9;


		.hot_update_zhe {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, .7);
			position: fixed;
			top: 0;
			z-index: 999900;

			.hot_update_box {
				position: absolute;
				width: 472rpx;
				height: 600rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				background-color: #fff;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 154rpx;
					margin-top: -60rpx;

				}

				.hot_update_box_item {
					width: 100%;
					height: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.gengxinan {
						width: 60%;
						height: 60rpx;
						background-color: #FA625D;
						margin: 20rpx auto;
						font-size: 24rpx;
						text-align: center;
						color: #fff;
						line-height: 60rpx;
						border-radius: 10rpx;
					}

					.hot_update_box_item_ {
						width: 100%;
						height: 100rpx;
						overflow: auto;
						text-align: center;

						.dingwei_box_text {
							width: 66%;
							margin: 0 auto;
							padding: 10rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}

		}




		.home_box {
			width: 100%;
			flex: 1;
			overflow-y: scroll;


			.home_box_lbt {
				width: 100%;
				height: 400rpx;

				.swiper_item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.home_box_center {
				width: 100%;
				height: 208rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				background-color: #fff;

				.home_box_center_item {
					width: 100rpx;

					p {
						font-size: 24rpx;
						text-align: center;
					}

					image {
						width: 94rpx;
						height: 94rpx;
					}
				}

			}

			.home_box_item {
				width: 100%;
				// height: 404rpx;
				background-color: #fff;
				margin-top: 16rpx;
				padding: 18rpx;

				.home_box_item_title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0 22rpx;
				}

				.home_box_item_content {
					width: 100%;
					display: flex;
					// justify-content: space-between;
					margin-top: 24rpx;

					.home_box_item_content_item {
						width: 230rpx;
						margin: 0 4rpx;
						font-size: 24rpx;

						.image {
							height: 230rpx;
							width: 230rpx;
							background-color: #c3b8ff;
						}

						p {
							color: #505050;
							padding: 8rpx 0;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						span {
							color: red;
						}
					}
				}
			}
		}
	}
</style>


<style lang="scss">
	.popup_box {
		width: 605rpx;
		height: 633rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 36rpx 10rpx;
		font-size: 29rpx;
		overflow: auto;
		border-radius: 25rpx;
	}

	.div {
		width: 340rpx;
		height: 490rpx;
		// background-color: ;
		border-radius: 15rpx;
		border: 5rpx solid transparent;
		box-shadow: 0 0 0 2rpx #E47845, 0 0 0 3rpx #FAD0A8, 0 0 0 4rpx #F6B27E;
		margin-bottom: 15rpx;
	}
</style>